<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ isEdit ? '修改商品分类' : '新增商品分类' }}</span>
      </div>
      
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="父分类ID" prop="parentId">
              <el-input v-model="form.parentId" placeholder="请输入父分类ID" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="分类名称" prop="categoryName">
              <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="分类编码" prop="categoryCode">
              <el-input v-model="form.categoryCode" placeholder="请输入分类编码" />
            </el-form-item>
          </el-col>
          <!-- 分类图标和分类图片字段已隐藏 -->
          <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="分类图标" prop="categoryIcon">
              <el-input v-model="form.categoryIcon" placeholder="请输入分类图标" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="分类图片" prop="categoryImage">
              <image-upload v-model="form.categoryImage"/>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="排序" prop="sortOrder">
              <el-input v-model="form.sortOrder" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.sys_common_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类描述" prop="description">
              <el-input v-model="form.description" type="textarea" placeholder="请输入分类描述" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item style="text-align: center; margin-top: 30px;">
          <el-button type="primary" @click="submitForm" :loading="loading">{{ isEdit ? '修改' : '新增' }}</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCategory, addCategory, updateCategory } from "@/api/fun/category"

export default {
  name: "CategoryForm",
  components: {},
  dicts: ['sys_common_status'],
  data() {
    return {
      // 提交状态
      loading: false,
      // 是否为编辑模式
      isEdit: false,
      // 表单参数
      form: {
        categoryId: null,
        parentId: null,
        categoryName: null,
        categoryCode: null,
        categoryIcon: null,
        categoryImage: null,
        sortOrder: null,
        status: "0",
        description: null
      },
      // 表单校验
      rules: {
        categoryName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" }
        ],
        categoryCode: [
          { required: true, message: "分类编码不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    const categoryId = this.$route.params && this.$route.params.categoryId
    if (categoryId) {
      this.isEdit = true
      this.getCategoryInfo(categoryId)
    }
  },
  methods: {
    /** 获取分类详细信息 */
    getCategoryInfo(categoryId) {
      getCategory(categoryId).then(response => {
        this.form = response.data
      })
    },
    /** 表单重置 */
    reset() {
      this.form = {
        categoryId: null,
        parentId: null,
        categoryName: null,
        categoryCode: null,
        categoryIcon: null,
        categoryImage: null,
        sortOrder: null,
        status: "0",
        description: null
      }
      this.resetForm("form")
    },
    /** 取消按钮 */
    cancel() {
      this.$tab.closePage()
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.categoryId != null) {
            updateCategory(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
                // 通知父页面刷新列表
                this.$eventBus.$emit('refreshCategoryList')
                this.$tab.closePage()
            }).finally(() => {
              this.loading = false
            })
          } else {
            addCategory(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
                // 通知父页面刷新列表
                this.$eventBus.$emit('refreshCategoryList')
                this.$tab.closePage()
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>